﻿<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <title id='Description'>With the AngularJS jqxDropDownButton widget, you can display any type of content
        in a popup. </title>
    <link rel="stylesheet" type="text/css" href="../../../jqwidgets/styles/jqx.base.css" />
     <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
   <script type="text/javascript" src="../../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) {
            $scope.dropDownButton = function (args) {
                var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">Click Me</div>';
                args.instance.setContent(dropDownContent);
            }
        });
    </script>
</head>
<body ng-controller="demoController">
    <jqx-drop-down-button jqx-created="dropDownButton" jqx-width="150" jqx-height="25">
       <div style="padding:10px;">
             <jqx-check-box>
                Entertainment</jqx-check-box>
            <br />
            <jqx-check-box>
                <span>Computers</span></jqx-check-box>
            <br />
            <jqx-check-box>
                <span>Sports</span></jqx-check-box>
       </div>
      </jqx-drop-down-button>
</body>
</html>
